<template>
      <div class="film-list">
        <ul>
            <li v-for="(item,index) in films" :key="index">
                <div class="list-left">
                    <img :src="item.poster">
                </div>
                <div class="list-right">
                    <div class="film-info">
                        <h5>{{item.name}}<span class="filmType">{{item.filmType.name}}</span></h5>
                        <div class="score font13 color797d82" >
                            <div v-if="item.grade">
                                观众评分：<span class="colorffb232">{{item.grade}}</span>
                            </div>
                        </div>
                        <p class="actor font13 color797d82">主演：{{actors(item.actors)}}</p>
                        <div class="areaAndTime font13 color797d82">{{item.nation}}</div>
                    </div>
                    <div class="ticket">
                        预约
                    </div>
                </div>
            </li>
        </ul>
        <div class="load-more" @click="loadMore">
            {{more}}
        </div>
    </div>
</template>

<script>
/* eslint-disable */
import {Indicator} from 'mint-ui'
import axios from 'axios'
export default {
  name: 'commingSoon',
  data () {
    return {
      'films': [],
      'page': 1,
      'pageSize': 5,
      'totalPage': 0,
      'more': '加载更多'
    }
  },
  created () {
  this.getFilms()
  },
  methods: {
   /**
   * 获取影片数据
   */
  getFilms (filmType,page,pageSize) {
     Indicator.open({
           text: '加载中...',
           spinnerType: 'fading-circle'
         });
    axios.get('/film/list',{
        params: {
            filmType: filmType||2,
            page: this.page||page,
            pageSize: this.pageSize||pageSize
        }
    }).then((res) => {
      console.log(res)
      if(res.data.status == 0){
        Indicator.close()  
        let data = res.data.data.films
        this.films = this.films.concat(data)
        this.totalPage = Math.ceil(parseInt(res.data.totalSize)/this.pageSize);
      }else{
        alert('网络情况不佳，请稍后重试')
      }
    })
  },
  /**
   * 处理响应信息中的演员表
   */
  actors (item) {
      if(item){
        return item.map((item) => {
          return item.name
        }).join(' ')
      }else{
          return '暂无主演'
      }
    },
        /**
     * 加载更多
     */
    loadMore () {
        console.log(this.totalPage);
       if(this.page < this.totalPage){
         this.page ++;
         this.getFilms(2,this.page,5);
       }else{
           this.more = '没有更多啦'
       }
    }
  }
}
</script>

<style lang="scss">
@import 'mint-ui/lib/style.css';
@import '@/styles/common/px2rem.scss';
.film-list {
    .load-more {
        text-align: center;
        font-size: px2rem(12);
    }
}
</style>
